<!-- ExecutionDetailDialog.vue -->
<template>
  <div>
    <el-form :model="form" label-width="120px">
      <el-form-item label="审批请求ID">
        <el-input v-model="form.approvalRequestId" disabled />
      </el-form-item>
      <el-form-item label="实际开始时间">
        <el-input v-model="form.actualStartTime" disabled />
      </el-form-item>
      <el-form-item label="实际结束时间">
        <el-input v-model="form.actualEndTime" disabled />
      </el-form-item>
      <el-form-item label="执行状态">
        <el-input v-model="form.status" disabled />
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.remarks" disabled />
      </el-form-item>
      <el-form-item label="车辆信息集合">
        <el-table :data="form.sysVechicleDto" border style="width: 100%">
          <el-table-column label="车牌号" align="center" prop="licensePlate" />
          <el-table-column label="品牌" align="center" prop="brand" />
          <el-table-column label="购车年份" align="center" prop="purchaseYear" />
          <el-table-column label="单位名称" align="center" prop="organizationName" />
          <el-table-column label="车辆类型" align="center" prop="type" />
          <el-table-column label="座位数" align="center" prop="seatCount" />
          <el-table-column label="驾驶员" align="center" prop="driver" />
          <el-table-column label="图片" align="center" width="120">
            <template slot-scope="scope">
              <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.image"
                fit="cover"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "ExecutionDetailDialog",
  props: {
    open: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: "执行详情"
    },
    form: {
      type: Object,
      default: () => ({})
    }
  }
};
</script>
